<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--    <title><%= htmlWebpackPlugin.options.title %></title>-->
  <title>Vue</title>
</head>
<body>
<div id="app">
  <Son></Son>
  我是文本
  <Son v-if="true"></Son>
</div>
<script src="../../Mine-Vue-index/Vue.js"></script>
<script>
  const GSon = Vue.extend({
    template: '<div>孙子<span>span</span></div>',
    data() {
      return {
        name: 'GSon'
      }
    },
    created(){
      this.$nextTick(()=>{
        console.log(this.name, 'GSon组件')
      })
    },
    beforeMount(){
      console.log('GSon组件bMount')
    }
  })


  const Son = Vue.extend({
    template: '<p>我是p<GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon><GSon></GSon></p>',
    components: {GSon},
    data() {
      return {
        name: 'Son'
      }
    },
    mounted() {
      this.$nextTick(()=>{
        console.log(this.name, 'Son组件')
      })
    },
    beforeMount() {
      console.log('Son beforeMount');
    },
  })
  const vm = new Vue({
    data: {
      name: 'I'
    },
    el: '#app',
    // 子组件嵌套情况：
    // template: '<div><Son><GSon></GSon></Son>我是文本<Son v-if="true"></Son></div>',
    // template: '<div><Son></Son>我是文本<Son v-if="true"></Son></div>',
    // 不支持 自定义组件单标签的写法，但支持 <img />写法，很奇怪
    // template: '<div><Son/>123<Son v-if="true" /></div>',
    components: {Son, GSon},
    mounted() {
      console.log(this, 'mounted');
      this.name = 2;
    },
    created() {
      console.log(this, 'created')
      this.$nextTick(()=>{
        console.log(this.name, '根组件')
      })
    },
    beforeMount: async function () {
      // const t = await new Promise(resolve => {
      //   setTimeout(() => resolve(1))
      // })
      // console.log('beforeMount');
    },
    // created(){
    //   console.log('created');
    // },
    // beforeUpdate(){
    //   console.log('beforeUpdate');
    // },
    // updated(){
    //   console.log('updated');
    // },
    methods: null,
    watch: null,
  });
  // console.log(vm, 'vm');
  if (vm._flag) {
    document.title = 'mine';
    // vm.$data.name = 2;
  }
</script>
</body>
</html>
